<template>
    <div class="binding-page">
        <div class="setting-page-right-title">
            <div class="setting-right-name">
                <div class="setting-top-name">绑定账号</div>
                <div class="setting-bottom-line"></div>
            </div>
        </div>
        <div class="binding-content">
            <el-form label-width="140px" label-position="right">
                <el-form-item label="当前绑定手机号：">
                    <span class="text-phone">{{loParams.phone}}</span>
                </el-form-item>
                <el-form-item label="更改绑定手机号：">
                    <el-input oninput="if(value.length>11)value=value.slice(0,11)" type="number" class="theme-input"
                              placeholder="请输入手机号" v-model="params.phone">
                    </el-input>
                </el-form-item>
                <el-form-item label="图形验证码：">
                    <el-row>
                        <el-col :span="14">
                            <el-input class="theme-input img-button" style="width:200px"
                                      placeholder="请输入图形验证码" v-model="loParams.imgCode"></el-input>
                        </el-col>
                        <el-col :span="7">
                            <s-identify class="img-checked" :contentHeight=40 :identifyCode="identifyCode"></s-identify>
                        </el-col>
                        <el-col :span="1" style="margin:-10px 0 0 0">
                            <el-button class="img-text-button" type="text" style="color: #4B8BF9" @click="refreshCode">
                                看不清<br>换一张
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="短信验证码：">
                    <el-input class="theme-input" placeholder="请输入短信验证码" v-model="params.code" style="width:300px">
                        <div slot="suffix" v-bind:class="residue.class" @click="sendCode" style="margin-left: 8px">
                            {{residue.msg}}
                        </div>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="submit-button" @click="submit">确认更改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
  import SIdentify from '../register/picVerfication'
  import validate from '../../assets/utils/validate.js'
  import _g from '../../assets/utils/global'

  export default {
    naem: 'bind',
    components: {
      SIdentify
    },
    data() {
      return {
        params: {
          phone: '',
          code: ''
        },
        loParams: {
          phone: '13234567678',
          imgCode: ''
        },
        residue: {
          second: 60,
          class: 'text-button-blue normal',
          msg: '发送验证码'
        },
        identifyCode: '',
        identifyCodes: '1234567890',
        timer: null
      }
    },
    created() {
      this.makeCode()
    },
    mounted() {
      // 验证码初始化
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
      if (localStorage.getItem(localSaved.userInfo) != null) {
        console.log(JSON.parse(localStorage.getItem(localSaved.userInfo)))
        this.loParams.phone = JSON.parse(localStorage.getItem(localSaved.userInfo)).company.phone
      }
      this.loParams.phone = _g.toHide(this.loParams.phone)
    },
    methods: {
      check() {
        if (this.identifyCode != this.loParams.imgCode) {
          _g.message('图片验证码不正确', 'warning')
          return false
        }
        if (this.params.phone == '' || this.loParams.phone == '' || !validate.isPhone(this.params.phone)) {
          _g.message('请输入正确手机号', 'warning')
          return false
        }
        if (this.params.phone == this.loParams.phone) {
          _g.message('更换的手机号不能一样', 'warning')
          return false
        }
        return true
      },
      submit() {
        //确认更改手机号
        if (!this.check()) {
          return false
        } else {
          _g.apiPost('/company/updatePhone.do', { yards: this.params.code, phone: this.params.phone }).then(res => {
            if (res.status == 0) {
              localStorage.setItem(localSaved.userInfo, JSON.stringify(res.data))
              this.$router.go(0)
            } else {
              _g.toMessage({
                status: res.status,
                msg: '手机号修改失败'
              })
            }
            console.log(res)
          })
        }
      },
      refreshCode() {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 生成四位随机验证码
      makeCode(o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
        }
        // console.log(this.identifyCode)
      },
      resetSendCode(that) {
        that.residue.second = 60
        that.residue.class = 'text-button-blue gray'
        that.residue.msg = '发送验证码'
        clearInterval(that.timer)
        that.timer = null
      },
      sendCode() {
        let that = this
        if (!this.check()) {
          return false
        } else {
          _g.apiPost('/company/validatePhone.do', { phone: this.params.phone }).then(res => {
            console.log('validate phone',res)
            if (res.status === 0) {
              if (that.timer) {
                _g.message('验证码正在发送，请稍候', 'warning')
                return
              }
              that.timer = setInterval(() => {
                if (that.residue.second <= 0) {
                  that.resetSendCode(that)
                } else {
                  that.residue.class = 'text-button-blue normal'
                  that.residue.msg = that.residue.second + 's重新发送'
                }
                that.residue.second--
              }, 1000)
              _g.apiPost('/company/getSMS.do', { phone: this.params.phone }).then(res => {
                _g.toMessage({
                  status: res.status,
                  msg: res.status == 0 ? '已发送' : '发送失败'
                })
                if (res.status != 0) {
                  that.resetSendCode(that)
                }
              })
            } else {
              _g.toMessage({ status: res.status, msg: res.msg })
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
    .binding-page .setting-page-right-title {
        background: rgba(251, 251, 255, 1);
        height: 50px;
    }

    .binding-page .setting-page-right-title .setting-top-name {
        font-size: 19px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 50px;
        font-weight: 400;
    }

    .binding-page .binding-content .text-button-blue {
        /*border-radius:4px;*/
        width: 119px;
        /*height: 43px;*/
        height: 100%;
        text-align: center;
        line-height: 43px;
        color: white;
        margin-left: 16px;
        display: inline-block;

        /*border:1px solid red;*/
    }

    .binding-page .binding-content .normal {
        /*background:linear-gradient(56deg,#82BFFD 0%,#4B8BF9 100%);*/
        /*box-shadow:0px 3px 10px 0px #b4d0ff;*/
        color: #4ab0cf;
        font-size: 20px;
        line-height: 35px;
    }

    .binding-page .binding-content .gray {
        /*background:linear-gradient(56deg,#BFBFBF 0%,#D6D6D6 100%);*/
        /*box-shadow:0px 3px 10px 0px #E2E2E2;*/
        color: #4ab0cf;
        font-size: 20px;
        line-height: 35px;
    }
</style>
